<template>
  <div>
    <div class="wrapper">
      <div class="c1">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
              <el-breadcrumb-item :to="{ path: '/backstage/index' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>招聘信息</el-breadcrumb-item>
            </el-breadcrumb>
      </div>
      <div class="add_style"><el-link icon="el-icon-edit" type="primary" @click="addRecruitInfo">添加招聘信息</el-link></div>
    </div>
    
    <el-card shadow="hover">
       <!-- 搜索表单 -->
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input v-model="ruleForm.enterpriseName" prefix-icon="el-icon-coordinate" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="薪资" prop="salary">
              <el-input prefix-icon="el-icon-s-ticket" v-model="ruleForm.salary" clearable ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="firstRow_thirdCol_style">
            <a @click="toggleAdvanced">
                {{ advanced ? '收起' : '展开' }}
                <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            </a>
            <el-button class="querybtn" type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">查询</el-button>
            <el-button icon="el-icon-help" @click="resetForm('ruleForm')">重置</el-button>
          </el-col>
        </el-row>
        
        <el-collapse-transition>
          <div v-show="advanced">
            <el-row>
              <el-col :span="8">
                <el-form-item label="岗位" prop="positionName">
                  <el-input prefix-icon="el-icon-s-help" v-model="ruleForm.positionName" clearable ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别要求" prop="gender">
                  <el-select v-model="ruleForm.gender" placeholder="请选择" clearable>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                    <el-option label="无限制" value="无限制"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </el-form>
      <el-table :data="tableData">
        <el-table-column
          label="企业名称"
          prop="enterpriseName"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>联系人: {{ scope.row.leader }}</p>
              <p>招聘地址: {{ scope.row.recruitmentAddress }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.enterpriseName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column
          prop="posName"
          label="岗位"
          align="center"
          width="120">
        </el-table-column>

        <el-table-column
          prop="salary"
          label="薪资"
          align="center"
          width="120">
        </el-table-column>

        <el-table-column
          prop="phone"
          label="联系电话"
          align="center"
          width="120">
        </el-table-column>

        <el-table-column
          sortable
          prop="recruimentTime"
          label="招聘时间"
          align="center"
          width="120">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="info"
              plain
              @click="detail(scope.$index, scope.row)">详情</el-button>
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm confirm-button-text='确定'
                          cancel-button-text='取消'
                          icon="el-icon-info"
                          icon-color="red"
                          title="确定删除这个招聘信息吗？"
                          @confirm="deleteRecruitInfo(scope.row)">
              <el-button type="danger" size="mini" slot="reference" plain>删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageRow"
        :total="total"
        @current-change="page">
      </el-pagination>
    </el-card>

    <!-- 详情页面dialog -->
    <RecruitInfoDialog :show.sync="show" v-bind:detailRow="detailRow"/>

     <!-- 点击编辑或添加弹出dialog -->
    <AddOrEditRecruitInfo  :show.sync="showEdit" v-bind:detailRow="detailRow"/>

  </div>
</template>

<script>
import { getStore } from '../../../storage/storage'
import  RecruitInfoDialog  from './RecruitInfoDialog.vue'
import AddOrEditRecruitInfo from './AddOrEditRecruitInfo.vue'
import { getRecruitmentInfoList,delRecruInfo } from '../../../api/recruitmentInfoManage/index'
export default {
  name: "RecruitmentInfoList",
  components: { RecruitInfoDialog,AddOrEditRecruitInfo },
  data(){
    return{
      advanced: true, // 控制表单的收起和展开
      ruleForm: {
        enterpriseName: '',
        salary: '',
        positionName: '',
        gender: '',
      },
      tableData: [],
      pageRow: 5,
      total: 100,
      show: false, // 详情页面弹窗显示
      showEdit: false, // 点击编辑弹窗显示
      detailRow: {}, // 点击详情之后每一行的数据 是个对象
    }
  },
  methods:{

    // 提交表单
    submitForm(){
       // 发送请求，返回列表数据
      const searchFormParams = {
        account: getStore("account"),
        enterpriseName: this.ruleForm.enterpriseName,
        salary: this.ruleForm.salary,
        positionName: this.ruleForm.positionName,
        gender: this.ruleForm.gender,
        page: 1, // 页面初始化完成之后默认查询第一页
        pageRow: this.pageRow, // 每页行数
      }
      getRecruitmentInfoList(searchFormParams).then(res=>{
        this.tableData = res.data.data.recruitmentInfoList;
        this.total = res.data.data.totalNum
      })
    },

    // 点击展开或者折叠改变状态
    toggleAdvanced(){
      this.advanced = !this.advanced
    },
     // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.submitForm();
    },
    page(currentPage){
      // 发送请求，返回列表数据
      const searchFormParams = {
        account: getStore("account"),
        enterpriseName: this.ruleForm.enterpriseName,
        salary: this.ruleForm.salary,
        positionName: this.ruleForm.positionName,
        gender: this.ruleForm.gender,
        page: currentPage, // 页面初始化完成之后默认查询第一页
        pageRow: this.pageRow, // 每页行数
      }
      getRecruitmentInfoList(searchFormParams).then(res=>{
        this.tableData = res.data.data.recruitmentInfoList;
        this.total = res.data.data.totalNum
      })
    },
    // 点击详情
    detail(index,row){
      this.show = true;
      this.detailRow = row;
      console.log(row);
    },
    // 添加
    addRecruitInfo(){
      this.showEdit = true;
    },
    // 编辑
    handleEdit(index,row){
      this.showEdit = true;
      this.detailRow = row;
      // console.log(row);
    },
    // 删除
    deleteRecruitInfo(row){
      const params = {
        recruitInfoAid: row.aid,
        enterpriseAid: row.enterpriseAid,
      }
      delRecruInfo(params).then(res=>{
        this.$message({
            message: res.data.message,
            type: 'success',
            duration: 800,
        });
        setTimeout(() => {
          this.$router.go(0);
        }, 800);
      })
    }
  },
  created(){
    // 发送请求，返回列表数据
    const searchFormParams = {
      account: getStore("account"),
      enterpriseName: this.ruleForm.enterpriseName,
      salary: this.ruleForm.salary,
      positionName: this.ruleForm.positionName,
      gender: this.ruleForm.gender,
      page: 1, // 页面初始化完成之后默认查询第一页
      pageRow: this.pageRow, // 每页行数
    }
    getRecruitmentInfoList(searchFormParams).then(res=>{
      // console.log(res);
      this.tableData = res.data.data.recruitmentInfoList;
      this.total = res.data.data.totalNum
    })
  }
}
</script>

<style scoped>
.firstRow_thirdCol_style{
  padding-left: 40px;
}
.querybtn{
  margin-left: 10px;
}
.add_style{
  float: right;
}
.wrapper{
  overflow: auto;
}
.c1{
  float: left;
}
</style>